<template>
  <div class="teacher-manage-page">
    <div class="heardRow">
      <h3>教师管理</h3>
    </div>
    <div class="btnRow">
      <div class="left">
        <el-button type="success" class="addBtn" @click="addTeacherBtn">
          <el-icon>
            <Plus />
          </el-icon>
          新增教师
        </el-button>
      </div>
      <div class="right">
        <el-button plain @click="bulkDeleteTeacherInfo">批量删除</el-button>
        <el-button plain @click="bulkResetPassword">批量重置密码</el-button>
      </div>
    </div>
    <div class="tableRow">
      <el-table
        ref="revRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand" width="1">
          <template #default="props">
            <el-form label-position="left" inline class="table-expand">
              <el-form-item label="姓名">
                <el-input
                  v-model="props.row.name"
                  placeholder="请输入姓名"
                  style="width: 100px"
                />
              </el-form-item>
              <el-form-item label="账号">
                <el-input
                  v-model="props.row.username"
                  placeholder="请输入账号"
                  style="width: 100px"
                />
              </el-form-item>
              <el-form-item label="重置密码">
                <el-input
                  type="password"
                  v-model="props.row.password"
                  show-password
                  placeholder="请输入密码"
                  style="width: 125px"
                />
              </el-form-item>
              <el-form-item label="真实姓名">
                <el-input
                  v-model="props.row.realName"
                  placeholder="请输入真实姓名"
                  style="width: 100px"
                />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input
                  v-model="props.row.phone"
                  placeholder="请输入手机号"
                  style="width: 150px"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="30" />
        <el-table-column label="姓名" header-align="center" width="100">
          <template #default="scope">
            <div style="text-align: center">
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="账号" header-align="center" width="100">
          <template #default="scope">
            <div style="text-align: center">
              <span>{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" header-align="center" width="100">
          <template #default="scope">
            <div style="text-align: center">
              <span>{{ scope.row.realName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" header-align="center" width="150">
          <template #default="scope">
            <div style="text-align: center">
              <span>{{ scope.row.phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center">
          <template #default="scope">
            <div style="display: flex; justify-content: center">
              <span
                v-if="tableRowExpand && scope.row.id == tableRowExpandId"
                style="color: #0ccd7e; margin-right: 10px; cursor: pointer"
                @click="handleEditFinish(scope.row)"
              >
                确认
              </span>
              <span
                style="color: #0ccd7e; margin-right: 10px; cursor: pointer"
                @click="handleClassEdit(scope.row)"
              >
                班级设置
              </span>
              <span
                style="color: #0ccd7e; margin-right: 10px; cursor: pointer"
                @click="handleEdit(scope.row)"
              >
                设置
              </span>
              <span
                style="color: #0ccd7e; cursor: pointer"
                @click="handleDelete(scope.row)"
              >
                删除
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        size="small"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-sizes="[5, 10, 20]"
        :pager-count="5"
        v-model:current-size="currentPage"
        v-model:page-size="pageSize"
          @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <el-dialog
    v-model="DialogVisible"
    align-center
    center
    style="width: 30%; padding: 35px"
    label-position="left"
  >
    <el-form :model="addTeacherInfo">
      <el-form-item label="姓名" prop="name" label-width="70px">
        <el-input v-model="addTeacherInfo.name" style="width: 225px" />
      </el-form-item>
      <el-form-item label="账号" prop="username" label-width="70px">
        <el-input v-model="addTeacherInfo.username" style="width: 225px" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName" label-width="70px">
        <el-input v-model="addTeacherInfo.realName" style="width: 225px" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone" label-width="70px">
        <el-input v-model="addTeacherInfo.phone" style="width: 225px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          class="confirm-btn"
          type="primary"
          @click="confirmAddStudent"
        >
          确定
        </el-button>
        <el-button class="cancel-btn" @click="cancelAddStudent">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive,onMounted } from "vue";
// import { userPiniaStore } from "@/stores";
import { Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
// const pinia = userPiniaStore();
const revRef = ref();
const tableRowExpand = ref(false);
const tableRowExpandId = ref("");
// 表格多选功能
const multipleSelection = ref([]);
// 表格数据
// const tableData = ref(null)
const tableData = [
  {
    id: 1,
    name: "张三",
    realName: "张一藤",
    phone: 12345678901,
    username: "zhangsan",
    password: "123456",
  },
  {
    id: 2,
    name: "李四",
    realName: "李二腾",
    phone: 12345678901,
    username: "lisi",
    password: "",
  },
];
// 新增对话框开关
const DialogVisible = ref(false);
// 新增学生信息收集
const addTeacherInfo = reactive({
  username: "", // 账号
  name: "", // 姓名
  realName: "", // 真实姓名
  phone: "", // 手机号
});

// 分页数据相关 总条数,当前页数，每页条数
const total = ref(0);//总条数
const pageSize = ref(5);// 每条页数
const currentPage = ref(1); // 当前页数

// 添加教师按钮
const addTeacherBtn = () => {
  DialogVisible.value = true;
  console.log("addTeacherBtn");
};

// 批量删除教师信息
const bulkDeleteTeacherInfo = () => {
  console.log("批量删除教师信息");
};

// 批量重置密码
const bulkResetPassword = () => {
  console.log("批量重置密码");
};

// 表格多选功能
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 表格中编辑设置按钮
const handleClassEdit = (row) => {
  router.push({
    path: "/main/setting/classSetting",
    query: row.id,
  });
};

// 表格中单条数据编辑功能
const handleEdit = (row) => {
  tableRowExpand.value = !tableRowExpand.value;
  tableRowExpandId.value = row.id;
  revRef.value.toggleRowExpansion(row, tableRowExpand.value);
};

// 表格中单条数据完成编辑功能
const handleEditFinish = (row) => {
  console.log(row);
  tableRowExpand.value = false;
  tableRowExpandId.value = "";
  revRef.value.toggleRowExpansion(row, tableRowExpand.value);
};

// 表格中单条数据删除功能
const handleDelete = (row) => {
  console.log(row);
};

// 确认添加学生
const confirmAddStudent = () => {
  DialogVisible.value = false;
};
// 取消添加学生
const cancelAddStudent = () => {
  DialogVisible.value = false;
};

// 分页方法
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

onMounted(() => {
    total.value = tableData.length;
  });
</script>

<style lang="scss" scoped>
.teacher-manage-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  .heardRow {
    width: 100%;
    height: 128px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    h3 {
      font-size: 25px;
      align-self: flex-start;
    }
  }
  .btnRow {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    .left {
      .addBtn {
        background-color: #0ccd7e;
      }
    }
    .right {
      .el-button {
        border: 1px solid #0ccd7e;
        color: #0ccd7e;
      }
    }
  }
  .tableRow {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .el-table {
      .table-expand {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }
    .el-pagination {
      margin-top: 20px;
      align-self: flex-end;
    }
  }
}
.dialog-footer {
  .confirm-btn {
    background-color: #0ccd7e;
  }
  .cancel-btn {
    border: 1px solid #0ccd7e;
    color: #0ccd7e;
  }
}

:deep(.el-table thead) {
  color: black;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #0ccd7e;
  background-color: #0ccd7e;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #0ccd7e;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled)) {
  background-color: white;
  border: 1px solid #ccc;
}
:deep(
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .btn-prev:disabled
  ) {
  background-color: white;
  border: 1px solid #ccc;
}
:deep(
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-next:disabled
  ) {
  background-color: white;
  border: 1px solid #ccc;
}
</style>
